<template>
    <a-modal :title="$t('Create') + 'OAuth2' + $t('服务端')" v-model='isShow' @cancel='handleClose' width='64%' @ok='handleCreate'
        :cancelText="$t('Cancel')" :okText="$t('Sure')" :maskClosable='false' v-dragModal>
        <a-form :form='form' labelAlign="left">
            <a-spin :spinning="loading">

                <a-row :gutter="16">
                    <a-col :span="12">
                        <a-form-item :label="$t('授权名称')" v-bind="formLayout" has-feedback>
                            <a-input v-decorator="['auth_name', {
                                rules: [{ required: true, message: $t('Enter') + $t('授权名称') }, {
                                    pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{1,10}$/,
                                    message: $t('支持中英文、大小写字母、数字，仅支持 1-10 个字符')
                                }]
                            }]" :placeholder="$t('Enter') + $t('授权名称')" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label="$t('用户角色')" v-bind="formLayout" has-feedback>
                            <a-select v-decorator="['role_id', {
                                rules: [{ required: true, message: $t('Choose') + $t('创建平台用户的角色') }]
                            }]" :placeholder="$t('Choose') + $t('创建平台用户的角色')">
                                <a-select-option v-for="item of roleArray" :value="item.role_id" :key="item.role_id">
                                    {{ item.role_name }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>

                <a-row :gutter="16">
                    <a-col :span="12">
                        <a-form-item :label="$t('授权URL')" v-bind="formLayout" has-feedback>
                            <a-input v-decorator="['auth_url', {
                                rules: [{ required: true, message: $t('Enter') + $t('授权URL') }]
                            }]" :placeholder="$t('Enter') + $t('授权URL')" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label="$t('获取token地址')" v-bind="formLayout" has-feedback>
                            <a-input v-decorator="['get_token_url', {
                                rules: [{ required: true, message: $t('Enter') + $t('获取token地址') }]
                            }]" :placeholder="$t('Enter') + $t('获取token地址')" />
                        </a-form-item>
                    </a-col>
                </a-row>

                <a-row :gutter="16">
                    <a-col :span="12">
                        <a-form-item :label="$t('用户信息地址')" v-bind="formLayout" has-feedback>
                            <a-input v-decorator="['get_user_url', {
                                rules: [{ required: true, message: $t('Enter') + $t('用户信息地址') }]
                            }]" :placeholder="$t('Enter') + $t('用户信息地址')" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label="$t('退出登录地址')" v-bind="formLayout" has-feedback>
                            <a-input v-decorator="['login_out_url', {
                                rules: [{ required: true, message: $t('Enter') + $t('退出登录地址') }]
                            }]" :placeholder="$t('Enter') + $t('退出登录地址')" />
                        </a-form-item>

                    </a-col>
                </a-row>

                <a-row :gutter="16">
                    <a-col :span="12">
                        <a-form-item :label="$t('客户端ID')" v-bind="formLayout" has-feedback>
                            <a-input v-decorator="['client_id', {
                                rules: [{ required: true, message: $t('Enter') + $t('客户端ID') }]
                            }]" :placeholder="$t('Enter') + $t('客户端ID')" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label="$t('客户端密钥')" v-bind="formLayout" has-feedback>
                            <a-input v-decorator="['client_secret', {
                                rules: [{ required: true, message: $t('Enter') + $t('客户端密钥') }]
                            }]" :placeholder="$t('Enter') + $t('客户端密钥')" />
                        </a-form-item>
                    </a-col>
                </a-row>

                <a-row :gutter="16">
                    <a-col :span="12">
                        <a-form-item :label="$t('回调地址')" v-bind="formLayout" has-feedback>
                            <a-input v-decorator="['redirect_uri', {
                                rules: [{ required: true, message: $t('Enter') + $t('回调地址') }]
                            }]" :placeholder="$t('Enter') + $t('回调地址')" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label="$t('服务端类型')" v-bind="formLayout" has-feedback>
                            <a-select v-decorator="['access_type', {
                                rules: [{ required: true, message: $t('Choose') + $t('服务端类型') }], initialValue: 1,  
                            }]" :placeholder="$t('Choose') + $t('服务端类型')">
                                <a-select-option v-for="item of userType" :value="item.value" :key="item.value">
                                    {{ item.label }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>

            </a-spin>
        </a-form>
    </a-modal>
</template>

<script>
export default {
    props: {
    roleArray: {}
  },
    data() {
        return {
            isShow: false,
            loading: false,
            form: this.$form.createForm(this),
            formLayout: {
                labelCol: { span: 6 },
                wrapperCol: { span: 18 }
            },
            userRole: [
                { label: '超级管理员', value: 0 },
                { label: '系统管理员', value: 1 },
                { label: '运维人员', value: 2 },
                { label: '审计人员', value: 3 },
            ],
            userType: [
            { label: 'General', value: 1 },
            ]
        }
    },
    methods: {
        handleCreate() {
            this.form.validateFields(async (err, value) => {
                console.log("value", value)
                if (!err) {
                    const params = {
                        auth_name: value.auth_name,
                        auth_url: value.auth_url,
                        get_token_url: value.get_token_url,
                        get_user_url: value.get_user_url,
                        login_out_url: value.login_out_url,
                        client_id: value.client_id,
                        client_secret: value.client_secret,
                        redirect_uri: value.redirect_uri,
                        access_type: value.access_type,
                        role_id: value.role_id,
                        switch: 0
                    }
                    console.log("aprams", params)
                    this.loading = true
                    const { data } = await this.$api.oauth.appendQAuth(params)
                    this.model(data.id) //返回模板
                    this.notice(data.id, data.params, data.flag) //通知列表显示
                    if (data.flag === 0) {
                        this.handleClose()
                        // this.$message.success(msg);
                        this.$emit('get-list');
                    }
                    //  else {
                    //     // this.$message.error(msg);
                    // }
                    this.loading = false
                }
            })
        },
        handleClose() {
            this.form.resetFields()
            this.isShow = false
        }
    }
}
</script>
